<!-- Sources charts -->
<script type="text/javascript" src="<?= base_url() ?>assets/amcharts/amcharts.js"></script>
<script type="text/javascript" src="<?= base_url() ?>assets/amcharts/serial.js"></script>
<script type="text/javascript" src="<?= base_url() ?>assets/amcharts/themes/dark.js"></script>
<!-- /Sources charts -->
<!-- Generar Charts -->
<script type="text/javascript">
    var chart = AmCharts.makeChart("chartdiv", {
        "type": "serial",
        "theme": "dark",
        "pathToImages": "<?= base_url() ?>assets/amcharts/images/",
        "dataProvider": [{
                "date": "2009-10-02",
                "value": 5
            }, {
                "date": "2009-10-03",
                "value": 15
            }, {
                "date": "2009-10-04",
                "value": 13
            }, {
                "date": "2009-10-05",
                "value": 17
            }, {
                "date": "2009-10-06",
                "value": 15
            }, {
                "date": "2009-10-09",
                "value": 19
            }, {
                "date": "2009-10-10",
                "value": 21
            }, {
                "date": "2009-10-11",
                "value": 20
            }, {
                "date": "2009-10-12",
                "value": 20
            }, {
                "date": "2009-10-13",
                "value": 19
            }, {
                "date": "2009-10-16",
                "value": 25
            }, {
                "date": "2009-10-17",
                "value": 24
            }, {
                "date": "2009-10-18",
                "value": 26
            }, {
                "date": "2009-10-19",
                "value": 27
            }, {
                "date": "2009-10-20",
                "value": 25
            }, {
                "date": "2009-10-23",
                "value": 29
            }, {
                "date": "2009-10-24",
                "value": 28
            }, {
                "date": "2009-10-25",
                "value": 30
            }, {
                "date": "2009-10-26",
                "value": 72,
                "customBullet": "http://www.amcharts.com/lib/3/images/redstar.png"
            }, {
                "date": "2009-10-27",
                "value": 43
            }, {
                "date": "2009-10-30",
                "value": 31
            }, {
                "date": "2009-11-01",
                "value": 30
            }, {
                "date": "2009-11-02",
                "value": 29
            }, {
                "date": "2009-11-03",
                "value": 27
            }, {
                "date": "2009-11-04",
                "value": 26
            }],
        "valueAxes": [{
                "axisAlpha": 0,
                "dashLength": 4,
                "position": "left"
            }],
        "graphs": [{
                "bulletSize": 14,
                "customBullet": "http://www.amcharts.com/lib/3/images/star.png",
                "customBulletField": "customBullet",
                "valueField": "value"
            }],
        "marginTop": 20,
        "marginRight": 20,
        "marginLeft": 40,
        "marginBottom": 20,
        "chartCursor": {graphBulletSize: 1.5},
        "autoMargins": false,
        "dataDateFormat": "YYYY-MM-DD",
        "categoryField": "date",
        "categoryAxis": {
            "parseDates": true,
            "axisAlpha": 0,
            "gridAlpha": 0,
            "inside": true,
            "tickLength": 0
        },
        "exportConfig": {
            "menuTop": "20px",
            "menuRight": "20px",
            "menuItems": [{
                    "icon": 'http://www.amcharts.com/lib/3/images/export.png',
                    "format": 'png'
                }]
        }
    });
</script>
<style>
    #chartdiv {
        background: #3f3f4f;
        color:#ffffff;	
        width	: 100%;
        height	: 500px;
    }
</style>
<!-- /Generar Charts -->
<!-- Content -->
<div id="content">
    <!-- Content wrapper -->
    <div class="wrapper">
        <h5 class="widget-name"><i class="icon-columns"></i>Reporte Divisiones</h5>

        <!-- Default datatable -->
        <div class="widget">
            <div class="navbar"><div class="navbar-inner"><h6>Divisiones</h6></div></div>
            <div class="table-overflow">
                <table class="table table-striped table-bordered" id="data-table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Empresa </th>
                            <th>División </th>
                            <th>Módulo</th>
                            <th>Sub-Módulo</th>
                            <th>Promedio </th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach($promedios as $num => $row){?>
                        <tr>
                            <td><?= $num+1 ?></td>
                            <td><?= $row->e_nombre ?></td>
                            <td><?= $row->d_nombre ?></td>
                            <td><?= $row->m_nombre ?></td>
                            <td><?= $row->sm_nombre ?></td>
                            <td><?= $row->prom ?></td>
                        </tr>
                        <?php } ?>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- /default datatable -->
        <!-- Graficas de reportes -->
        <div class="widget">
            <div class="tabbable"><!-- default tabs -->
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#tab1" data-toggle="tab">Grupo Cosmic</a></li>
                    <li><a href="#tab2" data-toggle="tab">Brother</a></li>
                    <li><a href="#tab3" data-toggle="tab">Azor</a></li>
                    <li><a href="#tab4" data-toggle="tab">Empresa1</a></li>
                    <li><a href="#tab5" data-toggle="tab">Empresa2</a></li>
                    <li><a href="#tab6" data-toggle="tab">Empresa3</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab1">
                        <h2>Grupo Cosmic</h2>
                        <div id="chartdiv"></div>	
                    </div>
                    <div class="tab-pane" id="tab2">
                        <h2>Brother</h2>
                        <div id="chartdiv"></div>
                    </div>
                    <div class="tab-pane" id="tab3">
                        <h2>Azor</h2>
                        <div id="chartdiv"></div>
                    </div>
                    <div class="tab-pane" id="tab4">
                        <h2>Empresa1</h2>
                        <div id="chartdiv"></div>
                    </div>
                    <div class="tab-pane" id="tab5">
                        <h2>Empresa2</h2>
                        <div id="chartdiv"></div>
                    </div>
                    <div class="tab-pane" id="tab6">
                        <h2>Empresa3</h2>
                        <div id="chartdiv"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Graficas de reportes -->

    </div>
    <!-- /Content wrapper -->
</div>
<!-- /Content -->
